<template>
	<div class="left-top">
		<div class="module-title">
			<span class="text">心率预警监测</span>
			<SelectView year @change="change" />
		</div>

		<div class="left-chart" id="person-data-chart"></div>

		<ul class="left-list">
			<li>
				<div class="list-title">总测试人数</div>
				<div class="list-value">
					{{ bottomData.count }}人
					<span class="list-unit"></span>
				</div>
			</li>
			<li>
				<div class="list-title">预警人群占比</div>
				<div class="list-value">
					{{ bottomData.middlepercentage }}
					<span class="list-unit"></span>
				</div>
			</li>
			<li>
				<div class="list-title">报警人群占比</div>
				<div class="list-value">
					{{ bottomData.highpercentage }}
					<span class="list-unit"></span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import { personOption } from './options';
import SelectView from './SelectView.vue';
import { getLeftTopData } from '@/api';
export default {
	name: 'left-top',
	components: {
		SelectView,
	},
	data() {
		return {
			chart: null,
			bottomData: {
				count: 0,
				middlepercentage: 0,
				highpercentage: 0,
			},
		};
	},

	mounted() {
		const chart = echarts.init(document.getElementById('person-data-chart'));
		this.chart = chart;

		this.eventBus.$on('resize', () => {
			if (this.chart) this.chart.resize();
		});
	},

	methods: {
		//  根据筛选条件 默认触发一次
		change(year) {
			this.getData(year);
		},

		async getData(year) {
			const result = await getLeftTopData(year);
			const {
				count,
				low,
				high,
				highpercentage,
				middle,
				middlepercentage,
				normal,
			} = result;
			this.bottomData = {
				count,
				middlepercentage,
				highpercentage,
			};
			this.chart.setOption(personOption([normal, low, middle, high]));
		},
	},
	beforeDestroy() {
		if (this.chart) this.chart.dispose();
		this.eventBus.$off('resize');
	},
};
</script>
<style lang="scss">
.module-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4.5vh;

	.text {
		font-weight: bold;
		letter-spacing: 0.2vw;
		font-size: 1.5vh;
		color: #fff;
	}

	.year-select {
		width: 15%;
		font-size: 0.8vh;
		height: 2vh;
		background-color: rgba(0, 128, 254, 0.01);
		color: #fff;
		border: none;
		box-shadow: 1px 0 0 0 rgba(0, 128, 254, 0.42),
			0 1px 0 0 rgba(0, 128, 254, 0.42), 0 0 1px 0 rgba(0, 128, 254, 0.42),
			0 0 0 1px rgba(0, 128, 254, 0.42);
	}

	.year-select-option {
		background-color: #050722 !important;
		color: #fff;
	}
}

.left-top {
	height: 37vh;
	padding: 1vh 2%;

	.left-chart {
		height: 23.5vh;
	}

	.left-list {
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 8vh;

		li {
			width: 33%;
			border-right: 2px solid rgba(59, 172, 255, 0.24);

			.list-title {
				margin-top: 0.2vh;
				text-align: center;
				font-size: 1.38vh;
				color: #fff;
				font-weight: bold;
			}

			.list-value {
				margin-top: 0.8vh;
				text-align: center;
				font-size: 2.2vh;
				font-weight: bold;
				color: #3bacff;
			}

			.list-unit {
				font-size: 1.4vh;
				font-weight: 400;
			}

			&:last-child {
				border: 0;
			}
		}
	}
}
</style>
